<template>
    <scroll-view scroll-y>
        <view class="wrap">
            <view class="searchList">
                <view class="list" v-for="(item, index) in list" :key="index">
                    <view class="list_img">
                        <image :src="item.img" mode="scaleToFill" />
                    </view>
                    <view class="list_name">{{ item.name }}</view>
                    <view class="price_num">
                        <text class="price">￥{{ item.price }}</text>
                        <text class="num">已售{{ item.sales }}</text>
                    </view>
                </view>
            </view>
        </view>
    </scroll-view>
</template>

<script>
import { get_search_list } from '../../api/api'
export default {
    data() {
        return {
            keyword: '',
            list: [],
        }
    },
    onLoad(options) {
        console.log(options)
        this.keyword = options.keyword
    },
    mounted() {
        get_search_list({
            keyword: this.keyword,
            skip: 0,
            limit: 20,
        }).then(res => {
            console.log(res)
            this.list = res.data
        })
    },
}
</script>

<style lang="scss" scoped>
.wrap {
    width: 100%;
    height: 100%;
    background-color: #fff;

    .searchList {
        width: 90%;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
        flex-direction: row;
        flex-wrap: wrap;

        .list {
            width: 45%;


            .list_img {
                width: 100%;
                height: 150px;

                image {
                    width: 100%;
                    height: 100%;
                }
            }

            .list_name {
                width: 100%;
                height: 30px;
                line-height: 30px;
                font-size: 16px;
                font-weight: 550;
                margin: 10px 0;
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-line-clamp: 1; // 控制多行的行数
                -webkit-box-orient: vertical;
            }

            .price_num {
                display: flex;
                justify-content: space-between;
                align-items: center;

                .price {
                    color: chartreuse;
                }

                .num {
                    color: #ccc;
                }
            }
        }
    }
}
</style>